iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

30天學網頁設計系列 第 26

Day26 如何使用bootstrap

  • 分享至 

  • xImage
  •  

首先,到Bootstrap官網的Documentation(Docs)裡,點選download,找到Bootstrap的CDN,複製下來貼到你編輯器

我這邊提供一個中文版網站:bootStrap

下載解壓縮檔

bootStrap必須依賴jquery.min.js的存在,所以js也是要一起下載的,jquery

把外部檔案引入工程裡面

把bootStrap的css、font、js、下載的jquery.min.js一併複製到專案下面,我這邊使用的是myelispe

再來需要設定jsp的頁面,請記得前後順序需正確,否則會導致頁面無法正常執行。

  1. 引入 bootstrap.min.css (Bootstrap的樣式表文件)
  2. 引入自己寫的 css 檔案(style.css)
  3. 引入 jQuery(javascript 庫)
  4. 引入 bootstrap.min.js 程式檔案
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--這個lang="zh-CN"是轉化為html5的版本  -->
<html lang="zh-CN">
<head>
<base href="<%=basePath%>">
<title>學習bootstrap案例</title>
<!-- 這個是自適應各種解析度的螢幕 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet"  href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</head>

使用bootStrap的樣式表

bootstrap可以隨時適用別人設計好的功能,只需要熟悉就可以直接使用喔!
例如,開啟樣式表bootstrap.css,可以看到如下.btn-primary 顯而易見這是一個按鈕樣式

border-color: #ccc;
}
.btn-default .badge {
color: #fff;
background-color:#333;
}
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-primary:focus,
.btn-primary.focusp {
color: #fff;
background-color: #286090;
border-color: #122640;
}
.btn-primary:hover {
color: #fff;
background-color: #286090;

在jsp頁面寫上

<body>
<button class="btn-primary">按鈕</button>
</body>

呈現出的效果會是

重新整理頁面後,將會看到一個藍色的按鈕。不需要自己寫一行 CSS 程式碼,只要在頁面裡面給某個元素指定一個 class ,就可以直接顯示出預定的樣式—。


上一篇
Day25 工具介紹:Bootstrap(一)
下一篇
Day27 Flutter—BLoC介紹
系列文
30天學網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言